<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title><%=title%></title>
  <meta name="keywords" content="爱墙，生日，我爱你，爱情，生日，圣诞，情人节，春节，祝福，礼物">
  <meta name="description" content="欢迎你！来到历史最悠久的爱墙创始网站，这个世界上爱的浓度最高的地方，留下你永不磨灭的祝福话语。在爱墙上留下纸条的人将被爱神眷顾和关怀而幸福一生。">
  <link rel="shortcut icon" type="image/ico" href="/images/favicon.ico">
  <link href="/stylesheets/common.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/form.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/kwindow.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/table.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/datagrid.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/tabs.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/pager.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/tree.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/site.css" rel="stylesheet" type="text/css">
  <link href="/stylesheets/lovewall-panel.css" rel="stylesheet" type="text/css">

  <script src="/javascripts/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script src="/javascripts/json2.js" type="text/javascript"></script>
  <script src="/javascripts/common.js" type="text/javascript"></script>
  <script src="/javascripts/layout.js" type="text/javascript"></script>
  <script src="/javascripts/split.js" type="text/javascript"></script>
  <script src="/javascripts/form.js" type="text/javascript"></script>
  <script src="/javascripts/kwindow.js" type="text/javascript"></script>
  <script src="/javascripts/tree.js" type="text/javascript"></script>
  <script src="/javascripts/tabs.js" type="text/javascript"></script>
  <script src="/javascripts/pager.js" type="text/javascript"></script>
  <script src="/javascripts/table.js" type="text/javascript"></script>
  <script src="/javascripts/datagrid.js" type="text/javascript"></script>
  <script src="/javascripts/drawing-panel.js" type="text/javascript"></script>
  <script src="/javascripts/pin.js" type="text/javascript"></script>
  <script src="/javascripts/drag.js" type="text/javascript"></script>
  <style>
    .lovewall-panel{
      border-radius:2px;
    }
    .lovewall-panel-header{
      border-bottom:1px dashed #eee;
    }
  </style>
</head>
<body>
<div style="width:100%; height:100%;position:fixed;">
  <div id="search-result-panel" class="lovewall-panel" style="display: none; cursor: move;">
    <div class="lovewall-panel-header">
    </div>
    <div class="lovewall-panel-body">
    </div>
  </div>
      <% for(var i=0; i<noteList.length; i++) {%>
    <div class="lovewall-panel" style="cursor: move; z-index: <%=i+10000%>; left: 0px; top: 0px; background: <%-noteList[i].bg_color%>;">
      <div class="lovewall-panel-header">
        第<%-noteList[i].tid%>条&nbsp;&nbsp;&nbsp;<%=noteList[i].createtime%>
      </div>
      <div class="lovewall-panel-body">
        <span style="font-size:<%-noteList[i].font_size%>;font-family:<%-noteList[i].font_style%>"><%-noteList[i].content%></span>
      </div>
    </div>
    <% } %>
  <div style="position:absolute;z-index:1000000;left:100px;top:50px;">
    <a href="javascript:openInputNote();" target="_blank" class="btn blue"><i class="iconfont icon-jiahao" style="font-size: 18px; font-style: normal; vertical-align: bottom; height: 30px; line-height: 30px;"></i>&nbsp;我要贴纸条</a>
  </div>
  <div id="search-box" style="position: absolute; z-index: 1000000; left: 1084px; top: 50px; background-color: rgb(62, 148, 254);">
    <span style="color:#fff;">&nbsp;&nbsp;纸条号：</span><input type="text" id="searchText" style="width:100px;height:22px;">
    <a id="btnSearch" class="btn blue"><i class="iconfont icon-mamaosusuo" style="font-size:18px;font-style:normal; vertical-align:bottom;height:30px;line-height:30px;"></i>&nbsp;搜索</a>
  </div>
</div>

<script type="text/javascript">
    $(function () {
        var leftMax =parseInt($(window).width() - $('.lovewall-panel').width(),10);
        var topMax = parseInt($(window).height() - 100, 10);
        var _left = -200;
        var _top = 0;
        $.each($('.lovewall-panel'), function (i, o) {
            if ($(o).attr('id') == 'search-result-panel') {
                $k(o).drag();
                return;
            }
            $k(o).drag();
            $(o).css('z-index', $g.zIndex++);
            if (_left > leftMax && _top > topMax) {//已在最底铺满一层,则随机定位.
                $(o).css('left', Math.random() * leftMax);
                $(o).css('top', Math.random() * topMax);
            }
            else {
                if (_left > leftMax) {
                    _left = 0;
                    _top += 120;//每个块高度不会低于120
                }
                else {
                    _left += 200;//每个块宽度是205,不大于205即可.
                }
                $(o).css('left', _left);
                $(o).css('top', _top);
            }
        });
        $('.lovewall-panel').mousedown(function (e) {
            $(this).css('z-index', $g.zIndex++);
        });
        $('#search-box').css('left', $(window).width() - 300);
        $(window).resize(function () {
            $('#search-box').css('left', $(window).width() - 300);
        });
        $('#btnSearch').click(function () {
            var txt =$.trim($('#searchText').val());
            if (txt == '') {
                top.kwindow.alert({ content: '请填写纸条号' });
                return;
            }
            $.get('searchNote?tid='+txt, function (result) {
                result = eval(result);
                if (result.msg) {
                    top.kwindow.alert({ content: result.msg });
                }else{
                    $('#search-result-panel').show();
                    $('#search-result-panel').css('z-index', $g.zIndex++);
                    $('#search-result-panel').css('background-color', result.bg_color);
                    $('#search-result-panel').find('.lovewall-panel-header').html('第' + result.tid + '条&nbsp;&nbsp;&nbsp;' + result.createtime + '');
                    $('#search-result-panel').find('.lovewall-panel-body').html(result.content);
                    $('#search-result-panel').css('left', ($(window).width() - $('#search-result-panel').width()) / 2);
                    $('#search-result-panel').css('top', ($(window).height() - $('#search-result-panel').height()) / 2);
                    $('#search-result-panel').addClass('anim-lovewall');
                    $('#search-result-panel .lovewall-panel-body').css('font-size',result.font_size).css('font-family',result.font_style);
                    var timerId = window.setTimeout(function () {
                        clearTimeout(timerId);
                        $('#search-result-panel').removeClass('anim-lovewall');//移除掉，以下再搜索时播放动画.
                    }, 2000);//2秒,不要少于css中定义动事时间即可.
                }
            });
        });
    });
    function openInputNote(){
        window.open("inputNote", "添加纸条","height=650,width=780,top=80,left=300,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
    }
</script>
</body>
</html>